<div id="preferences-device-details" class="preferences-page preferences-device-details" data-bind="with: $root.preferencesDeviceDetails" data-uie-name="preferences-devices-details">
  <div class="preferences-titlebar" data-bind="l10n_text: z.string.preferencesDeviceDetails"></div>
  <div class="preferences-content-wrapper">
    <div class="preferences-content" data-bind="antiscroll">
      <section class="preferences-section">
        <header class="preferences-devices-details">
          <div class="preferences-devices-icon icon-back" data-bind="click: clickOnDetailsClose" data-uie-name="go-back"></div>
          <span data-bind="l10n_text: z.string.preferencesDevices"></span>
        </header>
        <div class="preferences-devices-model" data-bind="text: device().model" data-uie-name="device-model"></div>
        <div class="preferences-devices-id">
          <span data-bind="l10n_text: z.string.preferencesDevicesId"></span>
          <span data-bind="foreach: device().formatId()" data-uie-name="device-id"><span class="device-id-part" data-bind="text: $data"></span></span>
        </div>
        <div class="preferences-devices-activated">
          <div data-bind="foreach: activationDate"><span data-bind="css: {'preferences-devices-activated-bold': $data.isStyled}, text: $data.text">?</span></div>
          <div data-bind="foreach: activationLocation"><span data-bind="css: {'preferences-devices-activated-bold': $data.isStyled}, text: $data.text">?</span></div>
        </div>
        <div class="preferences-devices-fingerprint-label" data-bind="l10n_text: z.string.preferencesDevicesFingerprint"></div>
        <div class="preferences-devices-fingerprint" data-bind="foreach: fingerprint()"><span class="device-id-part" data-bind="text: $data"></span></div>
        <div class="preferences-devices-verification slider">
          <input class="slider-input" type="checkbox" name="preferences_device_verification_toggle" id="preferences_device_verification" data-bind="checked: device().meta.isVerified">
          <label class="button-label" for="preferences_device_verification" data-bind="click: toggleDeviceVerification, l10n_text: z.string.preferencesDevicesVerification" data-uie-name="do-verify"></label>
        </div>
        <div class="preferences-detail" data-bind="l10n_text: z.string.preferencesDevicesFingerprintDetail"></div>
      </section>

      <section class="preferences-section">
        <header class="preferences-header"><hr class="preferences-separator"></header>
      </section>

      <section class="preferences-section">
        <div class="preferences-info" data-bind="l10n_text: z.string.preferencesDevicesSessionDetail"></div>
        <div class="preferences-devices-session" data-uie-name="preferences-device-details-session">
          <!-- ko if: sessionResetState() === z.viewModel.content.PreferencesDeviceDetailsViewModel.SESSION_RESET_STATE.RESET -->
            <button class="preferences-button button button-small button-fluid" data-bind="click: clickOnResetSession, l10n_text: z.string.preferencesDevicesSessionReset" data-uie-name="do-session-reset"></button>
          <!-- /ko -->
          <!-- ko if: sessionResetState() === z.viewModel.content.PreferencesDeviceDetailsViewModel.SESSION_RESET_STATE.ONGOING -->
            <div class="preferences-devices-session-reset" data-bind="l10n_text: z.string.preferencesDevicesSessionOngoing"></div>
          <!-- /ko -->
          <!-- ko if: sessionResetState() === z.viewModel.content.PreferencesDeviceDetailsViewModel.SESSION_RESET_STATE.CONFIRMATION -->
            <div class="preferences-devices-session-confirmation text-theme" data-bind="l10n_text: z.string.preferencesDevicesSessionConfirmation"></div>
          <!-- /ko -->
        </div>
      </section>

      <section class="preferences-section">
        <div class="preferences-info" data-bind="l10n_text: z.string.preferencesDevicesRemoveDetail"></div>
        <button class="preferences-button button button-small button-fluid" data-bind="click: clickOnRemoveDevice, l10n_text: z.string.preferencesDevicesRemove" data-uie-name="go-remove-device"></button>
      </section>
    </div>
  </div>
</div>
